<template>
  <div class="login">
    <!------------------------------------------------------Login返回导航------------------------------------------------------------------>
    <van-nav-bar :border="false" left-arrow @click-left="onLoginClick" />
    <div class="container">
      <!------------------------------------------------------Login导航------------------------------------------------------------------>
      <van-tabs v-model="loginTabs" class="LoginNav" animated>
        <!------------------------------------------------------登陆------------------------------------------------------------------>
        <van-tab title="登陆" class="loginBox">
          <van-cell-group>
            <van-field
              v-model="phone"
              type="tel"
              clearable
              placeholder="请输入手机号"
              :error-message="phoneError"
            />

            <van-field
              v-model="password"
              type="password"
              placeholder="请输入密码"
              clearable
              :error-message="passwordError"
            />
            <div class="logintext_active" >
              <span class="forgetText" @click="$router.push('/forget')">忘记密码</span>
            </div>
          </van-cell-group>

          <!------------------------------------------------------button------------------------------------------------------------------>
          <van-button
            type="info"
            size="large"
            @click="Btn_click"
            id="Btn_click"
            :loading="loginBtn"
            loading-type="spinner"
            loading-text="加载中..."
          >登 陆</van-button>
        </van-tab>
        <!------------------------------------------------------注册------------------------------------------------------------------>
        <van-tab title="注册" class="registerBox">
          <van-cell-group>

            <van-field
              v-model="setPhone"
              clearable
              type="tel"
              placeholder="请输入手机号"
              :error-message="setPhoneError"
            />
            <van-field
              v-model="setSms"
              center
              clearable
              placeholder="请输入短信验证码"
              :error-message="setSmsError"
            >
              <van-button
                slot="button"
                size="small"
                type="info"
                @click="setSmeBtn"
                :loading="SmsLoading"
                plain
                hairline
                loading-type="spinner"
                :loading-text="SmsLoadingText"
              >发送验证码</van-button>
            </van-field>

            <van-field
              v-model="setPassword"
              type="password"
              placeholder="请输入密码"
              clearable
              :error-message="setPasswordError"
            />
            <div class="agreementTextBox">
              <van-checkbox
                v-model="setAgreement"
                class="agreementText"
                icon-size="13"
                shape="square"
                :label-disabled="true"
              >
                我已阅读
                <span style="color:#FD5F4C;" @click="agreementText">用户协议、隐私政策、商城协议</span>
              </van-checkbox>
            </div>
          </van-cell-group>
          <!-- registerBtnButton -->
          <van-button
            type="info"
            size="large"
            @click="registerBtn"
            id="Btn_click"
            :loading="registerLoading"
            loading-type="spinner"
            loading-text="加载中..."
          >注 册</van-button>
        </van-tab>
        <van-tab title disabled></van-tab>
        <van-tab title disabled></van-tab>
      </van-tabs>
    </div>
  </div>
</template>
<script>
/* ... */
import { register, login, sendPhoneMassage } from '@/api/api'

export default {
  name: 'login',

  mixins: [],

  components: {},

  props: {},

  data () {
    return {
      loginTabs: 0,
      // 登陆数据
      phone: '', // 电话
      password: '', // 密码
      phoneError: '', // 电话错误提示
      passwordError: '', // 密码错误提示
      loginBtn: false,
      // 注册数据
      setPhone: '', // 设置手机号
      setSms: '', // 填写验证码
      setPassword: '', // 填写密码
      setAgreement: false, // 用户协议同意
      setPhoneError: '', // 手机号错误提示
      setSmsError: '', // 短信错误提示
      setPasswordError: '', // 密码提示
      smsTime: 30, // 获取短信倒计时
      SmsLoadingText: '', // loading倒计时
      SmsLoading: false, // 短信获取按钮状态
      registerLoading: false
    }
  },

  computed: {},

  watch: {
    loginTabs (val) {
      // 优化数据切换残留
      if (val === 1) {
        this.phone = ''
        this.password = ''
      } else {
        this.setPhone = ''
        this.setSms = ''
        this.setPassword = ''
      }
    }
  },

  created () {
    if (this.$route.query.tabs) {
      if (this.$route.query.tabs === '0') {
        this.loginTabs = 0
      } else if (this.$route.query.tabs === '1') {
        this.loginTabs = 1
      } else {
        this.$toast('当前router参数错误,请检查！')
        console.log(this.$route.query.tabs)
      }
    } else {
      console.log('什么都没有传递')
    }
    if (localStorage.getItem('X-Auth-Token')) {
      this.$router.push('./')
    }
  },

  mounted () {},

  destroyed () {},

  methods: {
    onLoginClick () {
      this.$router.back()
    },
    agreementText () {
      this.$router.push('/agreement')
    },
    // 获取短信Btn
    setSmeBtn () {
      if (this.setPhone === '') {
        this.setPhoneError = '手机号不可为空'
      } else if (this.setPhone.length < 11) {
        this.setPhoneError = '手机号码小于11位数'
      } else {
        this.setPhoneError = ''
        this.SmsLoading = true
        // 在请求数据开始后执行倒计时
        this.$toast.success('成功发送短信')
        let postData = {
          phone: this.setPhone
        }
        sendPhoneMassage(this.$qs.stringify(postData)).then(res => {
          // console.log(res.data)
          var authTimetimer = setInterval(() => {
            this.smsTime--
            this.SmsLoadingText = this.smsTime + '秒'
            if (this.smsTime <= 0) {
            // 取消当前任务
              clearInterval(authTimetimer)
              // 按钮可点击
              this.SmsLoading = false
              // 还原按钮文字
              this.SmsLoadingText = ''
              // 还原时间
              this.smsTime = 30
            }
          }, 1000)

          if (res.data.code === 200) {
            this.$toast('验证码已发送！')
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
            this.registerLoading = false
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    // 注册按钮
    registerBtn () {
      // this.$toast('registerBtn被点击')
      if (this.setPhone === '') {
        this.setPhoneError = '手机号码不可为空'
      } else if (this.setPhone.length < 11) {
        this.setPhoneError = '手机号码小于11位数'
      } else if (this.setSms === '') {
        this.setPhoneError = ''
        this.setSmsError = '验证码不可为空'
      } else if (this.setPassword === '') {
        this.setSmsError = ''
        this.setPhoneError = ''
        this.setPasswordError = '密码不可为空'
      } else if (this.setPassword.length < 8) {
        this.setSmsError = ''
        this.setPhoneError = ''
        this.setPasswordError = '请输入8位至20位，字母数字混合密码'
      } else if (this.setAgreement === false) {
        this.setSmsError = ''
        this.setPhoneError = ''
        this.setPasswordError = ''
        this.$toast.fail('请阅读并勾选用户注册协议')
      } else {
        this.setSmsError = ''
        this.setPhoneError = ''
        this.setPasswordError = ''
        // 将注册按钮设置为不可点击状态开始获取数据

        this.registerLoading = true
        let postData = {
          phone: this.setPhone,
          password: this.setPassword,
          code: this.setSms
        }
        register(this.$qs.stringify(postData)).then(res => {
          // console.log(res.data)
          if (res.data.code === 200) {
            this.$toast('注册成功，请登陆！')
            this.$router.push('./login?tabs=0')
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
            this.registerLoading = false
          }
        }).catch(err => {
          console.log(err)
        })
      }
    },
    // 登陆按钮被点击
    Btn_click () {
      if (this.phone === '') {
        this.phoneError = '手机号不能为空'
      } else if (this.phone.length < 11) {
        this.phoneError = '请输入11位手机号'
      } else if (this.password === '') {
        this.phoneError = ''
        this.passwordError = '密码不能为空'
      } else if (this.password.length < 8) {
        this.phoneError = ''
        this.passwordError = '您输入的密码小于8位'
      } else {
        this.phoneError = ''
        this.passwordError = '' // 清空错误提示状态
        this.loginBtn = true // 将按钮设置为不可点击状态
        // 请求数据
        this.$toast('正在请求数据')
        // console.log(, )
        let postData = {
          phone: this.phone,
          password: this.$md5(this.password)
        }
        login(this.$qs.stringify(postData)).then(res => {
          console.log(res.data.code)
          if (res.data.code === 200) {
            this.$toast('登入成功！')
            localStorage.setItem('X-Auth-Token', res.data.data.token)
            this.$router.push('./')
            // console.log(localStorage.getItem('X-Auth-Token'))
          } else if (res.data.code === 500) {
            this.$toast(res.data.message)
            this.loginBtn = false
          }
        }).catch(err => {
          console.log(err)
        })
      }
    }
  }
}
</script>

<style lang="less" >
/* ... */
.login{
  background-color: #fff;
  height: 100%;
}
.LoginNav {
  font-size: 26px;
  text-align: center;
  margin-top: 25px;
  color: #999999;
  ::after {
    border: none;
  }
  // 导航切换标签
  .van-tabs__wrap {
    .van-tabs__nav {
      .van-tabs__line {
        background-color: #d7b782;
      }
      .van-tab {
        font-size: 26px;
      }
      .van-tab--active {
        color: #d7b782;
      }
    }
  }
  //导航盒子
  .van-tabs__content {
    .van-tabs__track {
      .loginBox,
      .registerBox {
        padding-top: 65px;
      }
      .van-tab__pane-wrapper {
        .van-tab__pane {
          .van-cell-group {
            .van-cell:not(:last-child)::after {
              left: 0;
            }
            .login_InBottom {
              margin-bottom: 10px;
            }
            .van-checkbox {
              padding: 20px 15px 0;
            }
          }
          #Btn_click {
            margin-top: 39px;
          }
          .logintext_active {
            text-align: right;
            .forgetText {
              text-align: right;
              font-size: 12px;
              color: #d7b782;
              margin-top: 15px;
            }
          }

          .agreementTextBox {
            .agreementText {
              .van-checkbox__label {
                color: #999999;
                font-size: 12px;
              }
            }
          }
        }
      }
    }
  }
}
.container {
  margin: 0 15px;
}
</style>
